<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
            
            <el-form-item label="数据表名：" prop="tableName">
			   <el-col :span="8">
				   <el-input v-model="form.tableName"  disabled=""></el-input>
			   </el-col>
		   </el-form-item>
		   <el-form-item label="字段名称：" prop="fieldName">
			   <el-col :span="8">
				   <el-input v-model="form.fieldName" placeholder="请输入字段名称">
                       <template slot="prepend">cm_</template>
                       <template slot="append">_custom</template>
                   </el-input>
			   </el-col>
               <span style="color:red;">&nbsp;&nbsp;&nbsp;注：自定义字段名称会自动增加 cm_ 前缀和 _custom 后缀</span>
		   </el-form-item>
			<el-form-item label="数据类型：" prop="fieldType">
            <el-col :span="8">
                <el-select v-model="form.fieldType" @change="fieldTypeSelected" placeholder="请选字段数据类型">
                    <el-option
                        v-for="item in fieldTypeData"
                            :key="item.text"
                            :label="item.text"
                            :value="item.text">
                    </el-option>
                </el-select>
            </el-col>
        </el-form-item>
        <el-form-item label="字段注解：" prop="fieldNote">
            <el-col :span="8">
                <el-input type="textarea" v-model="form.fieldNote" rows="5" placeholder="请输入字段注解,请尽量剪短，例如：学生姓名"></el-input>
            </el-col>
        </el-form-item>
			<el-form-item label="默认内容：" prop="fieldDefault">
			   <el-col :span="8">
				   <el-input v-model="form.fieldDefault"></el-input>
			   </el-col>
		   </el-form-item>
		   
		   <el-form-item>
			   <el-button type="primary" @click="submitForm('form')">提交</el-button>
			   <el-button @click="resetForm">重置</el-button>
		   </el-form-item>
		   
		</el-form>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                rules : {
				   fieldName : [
					   { required: true, message: '请输入字段名称', trigger: 'blur' }
				   ]
                },
                fieldTypeData : [
                    {
                        text : 'int'
                    },
                    {
                        text : 'varchar'
                    },
                    {
                        text : 'text'
                    }
                ]
            }
        },
        //初始化函数
        mounted() {

        },
        //计算属性
        computed: {
            ...mapState({
				form : state => state.AddMemberModelModule.form
			})
        },
        //组件方法
        methods: {

            fieldTypeSelected(val){
                
                if(val == 'int'){
                    this.form.fieldType = 'INT(11)';
                    this.form.fieldDefault = '0';
                }else if(val == 'varchar'){
                    this.form.fieldType = 'VARCHAR(200)';
                    this.form.fieldDefault = '';
                }else{
                    this.form.fieldType = 'TEXT';
                    this.form.fieldDefault = '';
                }
                
            },
            submitForm(form){
				
				this.$refs[form].validate((valid) => {

					if (valid) {

					    var params = {
							tableName    : this.form.tableName,
                            fieldName    : "cm_" + this.form.fieldName + "_custom",
                            fieldType    : this.form.fieldType,
                            fieldNote    : this.form.fieldNote,
                            fieldDefault : this.form.fieldDefault
                        }

						this.$myLoading.startLoading()
						this.$http.postHttp(
							this.$API.dbAddTableField,
							params,
							rs => {
								this.$myLoading.endLoading()
								this.$myPop.SuccessMessage()
								this.$store.commit('AddMemberModelModule/clearForm');
							}
						)
					}

				})
				
			},
			
			resetForm(){
				this.$store.commit('AddMemberModelModule/clearForm');
			}
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
</style>